<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="bigheader">
        <div class="header"></div>
    </div>
    <div class="header-bignav">
        <div class="header-nav">
            <span class="header-nav-left">
                <span class="address"></span>
                <span class="left-word">深圳 &lt;切换&gt;</span>
            </span>
            <span class="header-navword">
                <a href="#">首页</a>
                <a href="#">资讯</a>
                <a href="#">测评</a>
                <a href="#">商城</a>
            </span>
            <span class="header-nav-right">
                <span class="personal"></span>
                <span class="right-word">个人中心</span>
            </span>
        </div>
    </div>
    <div class="nav-top">
        <a href="">首页 &gt;</a>
        <a href="">预防装修污染 &gt;</a>
        <a href="">材料库</a>
    </div>
    <div class="nav">
        <div class="nav1">
            <a href="" class="one">类别</a>
            <a href="">全部</a>
            <a href="" class="liang">地板</a>
            <a href="">涂料</a>
            <a href="">墙纸</a>
            <a href="">瓷砖</a>
            <a href="" class="da">粘胶剂</a>
            <a href="">油漆</a>
            <a href="">家具</a>
            <a href="">板材</a>
            <a href="">饰品</a>
            <span class="sanjiao"></span>
        </div>
        <div class="nav2">
            <a href="#" class="one">类型</a>
            <a href="">全部</a>
        </div>
        <div class="nav3">
            <a href="" class="one">材质</a>
            <a href="">全部</a>
            <a href="" class="liang">实木</a>
            <a href="">复合</a>
            <a href="">强化</a>
            <a href="">其他</a>
        </div>
        <div class="nav4">
            <a href="" class="one">品牌</a>
            <a href="">全部</a>
            <a href="" class="liang">圣象</a>
            <a href="" class="da">大自然</a>
            <a href="" class="da">生活家</a>
            <a href="" class="ju">北美枫情</a>
            <a href="">德尔</a>
            <a href="">博典</a>
            <a href="">船王</a>
        </div>
    </div>
    <div class="search">
        <span class="sreach-left">
            <a href="#">&nbsp;&nbsp;发布价格 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;环保节能</a>
            <span class="photo1"></span>
            <span class="photo2"></span>
            <span class="photo3"></span>
        </span>
        <span class="sreach-input">
            <input type="text" placeholder="搜索" class="sreach-sou">
            <span class="sreach-photo"></span>
            <span class="sreach-word"><a href="">搜索</a></span>
        </span>
        <span class="sreach-right">
            <a href="#">了解家居医生建材环保评级标准</a>
            <span class="photo4"></span>
        </span>
    </div>
    <div class="picture">
        <div class="picture-up">
            <div id="div1">
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
            <div>
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
            <div>
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
            <div>
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
        </div>
        <div class="picture-down">
            <div id="div2">
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
            <div>
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
            <div>
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
            <div>
                <div id="word">
                    <p>德尔 &nbsp;&nbsp;&nbsp;都市系列3001</p>
                    <p>木地板 - 复合地板</p>
                    <p>单价：128元/㎡</p>
                    <p id="big">环保评级：B（可以使用） </p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-nav">
        <div id="lastpage"><a href="#">上一页</a></div>
        <div class="number">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
        </div>
        <div id="nextpage"><a href="#">下一页</a></div>
        <div class="number2">
            <a href="#">共有10页，去第 </a>
            <input type="text">
            <a href="#"> 页</a>
        </div>
        <div class="number3">
            <a href="#">确定</a>
        </div>
    </div>
    <div class="code">
        <div class="QRcode"></div>
        <div class="code-word">
            <div><a href="#" id="code-word1">建材检测 需求反馈</a></div>
            <div><a href="#">亲爱的用户，我们正在不断的完善和更新建材库。</a></div>
            <div><a href="#">若没有找到您想要的材料信息，请将您想到的建材告诉我们。</a></div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-center">
            <div class="footer-logo"></div>
            <div class="center-word">
                <p>为室内环境健康把好每一关</p>
                <p>家居医生致力于中国人的家居健康问题，通过专业的技术研究</p>
                <p>和测评，倾力协助大众打造绿色、环保的人居生活环境。</p>
            </div-center-word>
        </div>
        <div class="hr"></div>
        <div class="center-bottom">
            <div><p>深圳建筑科学研究院股份有限公司 &nbsp;&nbsp;&nbsp;家居医生网</p></div>
            <div class="right"><p>粤ICP备08011321号 &copy;Copyright All Right Reserved</p></div>
        </div>
        <div class="footer-right">
            <div class="right1">
                <a href="#" class="tx">关于我们</a>
                <a href="#">版权说明</a>
                <a href="#" id="xt">官方微信</a>
            </div>
            <div class="right2">
                <a href="#" class="tx">联系我们</a>
                <a href="#">用户隐私</a>
                <a href="#" id="xt">天猫旗舰店</a>
            </div>
            <div class="right3">
                <a href="#" class="tx">加入我们</a>
                <a href="#">免费申明</a>
                <a href="#" id="xt">有赞商城</a>
            </div>
            <div class="logo1"></div>
            <div class="logo2"></div>
            <div class="logo3"></div>
        </div>
    </div>
    <script>
        $(".sreach-sou").focus(function(){
            $(".sreach-input").animate({width:"380px"},500)
        }).blur(function(){
            $(".sreach-input").animate({width:"260px"},500)
        })
    </script>
</body>
</html>